<template>
  <el-image  
      style="width: 100%;height: 100%;"
     :src="url"
     @click="handleClickStop"
     :preview-src-list="list||[picSource||url]" >
     <template #error>
       <div  class="error-imgage">
         <i class="vxe-icon-picture-fill" style="font-size:40px;color:#afadad;"></i>
       </div>
    </template>
   </el-image>
</template>
<script setup>
import { ref,onMounted,nextTick } from 'vue';
const props = defineProps({
 url:{
     type:String,
     default:''
 },
 list:{
   type:Array,
   default:[]
 },
 picSource:{
     type:String,
     default:''
 } 
}) 

const handleClickStop =()=>{
 setTimeout(() => {
     nextTick(() => {
       let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
       if (!domImageView) {
         return;
       }
       domImageView.addEventListener("click", () => {
         document.querySelector(".el-image-viewer__close").click();
       });
   });
 }, 500);

}
</script>
<style lang="scss">
.error-imgage{
width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 text-align: center;
 justify-content: center;
}
</style>